<template>
	<view class="touzipage">
		<view class="welbox">
			<view class="welleft">
				<view class="weltitle">
					欢迎您的加入！
				</view>
				<view class="welcontent">
					我们会尽早合适信息并及时回复
				</view>
			</view>
			<view class="welimg">
				<image src="/static/images/加盟.png" mode=""></image>
			</view>
		</view>
		<view class="typebox">
			<view class="typetitle">
				投资类型
			</view>
			<view class="selbox">
				<radio-group v-model="type"  class="selbox">
								<label class="itemlable">
									<view  class="yuan">
										<radio value="1"  />
									</view>
									<view class="name">个人</view>
								</label>
								<label  class="itemlable">
									<view class="yuan">
										<radio value="2"  />
									</view>
									<view class="name">公司</view>
								</label>
							</radio-group>
			</view>
		</view>
		<view class="formbox">
			<view class="formtitle">
				填写基本信息
			</view>
			<view class="itemline">
				<view class="lable">
					姓名
				</view>
				<input type="text" placeholder="填写姓名" v-model="name" />
			</view>
			<view class="itemline">
				<view class="lable">
					手机号码
				</view>
				<input type="number" maxlength="11" placeholder="填写手机号码" v-model="phone" />
			</view>
			<view class="itemline">
				<view class="lable">
					所在区域
				</view>
				<input type="text"  placeholder="区域" v-model="city" />
			</view>
			<view class="itemline">
				<view class="lable">
					详细地址
				</view>
				<input type="text"  placeholder="地址" v-model="address" />
			</view>
		
		
		</view>
		<view class="btn">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:'',
				city:'',
				name:'',
				phone:'',
				address:''
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
.touzipage{
	width: 750rpx;
	box-sizing: border-box;
	padding: 20rpx;
	background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(255,255,255,0) 76%);
	.welbox{
		width: 100%;
		background-color: white;
        box-sizing: border-box;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.welleft{
			line-height: 1.7;
			.weltitle{
				font-weight: bold;
			}
			.welcontent{
				color: #B6B6B6;
				font-weight: bold;
			}
		}
		.welimg{
			width: 140rpx;
			height: 140rpx;
			border-radius: 20rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
			
		}
	}
	.typebox{
		width: 100%;
		background-color: white;
		box-sizing: border-box;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding-bottom: 40rpx;
		.typetitle{
			font-weight: bold;
		}
		.selbox{
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: space-evenly;
			margin-top: 20rpx;
			.itemlable{
				display: flex;
				align-items: center;
				.yuan{
					margin-right: 20rpx;
				}
			}
		}
	}
	.formbox{
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 0;
		.formtitle{
			color: #B6B6B6 ;
			font-weight: bold;
		}
		.itemline{
			width: 100%;
			display: flex;
			align-items: center;
			background: white;
			box-sizing: border-box;
			padding: 20rpx;
			color: #2A2A2A ;
			border-bottom: 1rpx solid whitesmoke;
			.lable{
				width: 30%;
				text-align: justify;
				font-weight: bold;
			}
		
			
			
		}
		
	}
	.btn{
		width: 90%;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		color: white;
		border-radius: 45rpx;
		margin: 100rpx auto;
		background: #BD00FF;
	}
	
}
</style>
